<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="js/layui2.4.5/css/layui.css">
<style type="text/css">
	div.loginDiv{width: 500px;margin: 50px auto;background-color: #EEE;padding: 20px 50px;text-align: center;position: relative;}
	a,input{border:0;background-color: #0099E6;margin: 5px 20px;padding: 10px;box-shadow: 2px 2px 2px rgba(0,0,0,.3);border-radius: 5px;text-decoration: none;color: white; }
	a{font-size: 12px;}
</style>
<%-- <script src="<%=basePath  %>js/jquery.min.js"></script> --%>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="<%=basePath  %>js/layui2.4.5/layui.js"></script>
<script src="<%=basePath  %>js/layui2.4.5/lay/modules/layer.js"></script>
</head>
<body>
	<div class="loginDiv">
    <h2>LOGIN  USER</h2>
	<form action="<%=basePath %>login" method="post">
		<div>
			<label>帐号：</label>
			<input type="text" id="userName" name="userName" onblur="checkUser()" >
		</div>
		<div>
			<label>密码：</label>
			<input type="password" name="password" >
		</div>
		<div>
			<input id="submit" type="submit" value="登录" >
			<a href="toSignIn">sign in1</a>
		</div>
	</form>
		<p style="color: red;">
		<c:if test="${!empty msg }"> 
			${msg }
		</c:if>
		</p>
	</div>
	
	<script type="text/javascript">
		function checkUser(){
			$.ajax({  
				type : "get",  //提交方式  
				url : "<%=basePath %>checkUser",//路径  
				data : {  
				   "userName": $("#userName").val()
				},//数据，必须为 Key/Value 格式  
				dataType: "json", 
				success : function(result) { //返回数据根据结果进行相应的处理 
					console.log(typeof(result));
					console.log(result);
			//		console.log($.parseJSON(result));//jquery json字符串 转对象
			//		console.log(eval("("+result+")"));//js  json字符串 转对象
					if (result.success) {  
						//意味着你查询出来有这个对象 就是这个用户名已经存在了 我要给他一个弹窗 说 这个用户名已经存在了
						//$("#userName").focus()
						//layer.tips('用户名已存在', '#userName')
					} else {  
						
					}  
				}  
			});
		}
	</script>
</body>
</html>